<template>
  <div>
    <div style="margin-left: 30px">
      <p>完善信息</p>
      <p>审核通过即可成功入驻</p>
    </div>
    <div style="margin-left: 30px">
      <a-form>
        <a-form-item>
          <!-- 邮箱输入框和获取验证码按钮 -->
          <a-input
            label="请输入邮箱号"
            placeholder="请输入邮箱号"
            style="width: calc(100% - 120px); display: inline-block"
          />
          <a-button
            type="primary"
            style="
              width: 100px;
              height: 40px;
              margin-left: 10px;
              background-color: #1890ff;
              border-color: #1890ff;
            "
            @click="handleGetCode"
          >
            获取验证码
          </a-button>
        </a-form-item>

        <a-form-item label="请输入验证码">
          <a-input />
        </a-form-item>

        <a-form-item label="请输入密码">
          <a-input />
        </a-form-item>
        <a-form-item label="请确认密码">
          <a-input />
        </a-form-item>

        <a-form-item>
          <a-button
            type="primary"
            style="width: 30%; height: 50px"
            @click="toMyText"
          >
            下一步
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

import { useRouter } from "vue-router";

const router = useRouter();

const formItemLayout = computed(() => {
  return formLayout.value === "horizontal"
    ? {
        labelCol: { span: 1 },
        wrapperCol: { span: 14 },
      }
    : {};
});

const buttonItemLayout = computed(() => {
  return formLayout.value === "horizontal"
    ? {
        wrapperCol: { span: 14, offset: 6 },
      }
    : {};
});

function handleGetCode() {
  // Logic to get verification code
  console.log("获取验证码按钮点击");
}

const toMyText = () => {
  router.push("/MyText");
};
</script>

<style scoped>
/* Optional: Add any additional styling here */
</style>
